<template>
  <div class="login-container">
    <el-form class="login-page">
      <h2 class="title" style="margin-bottom: 20px;text-align: center">图书管理系统登陆</h2>
      <el-form-item prop="username">
        <el-input v-model="form.userName" placeholder="用户名" clearable>
          <template #prefix>
            <el-icon class="el-input__icon">
              <User />
            </el-icon>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item prop="password">
        <el-input v-model="form.password" placeholder="密码" clearable show-password>
          <template #prefix>
            <el-icon class="el-input__icon">
              <Lock />
            </el-icon>
          </template>
        </el-input>
      </el-form-item>

      <!-- 管理员、普通用户的选择 -->
      <el-form-item>
        <el-radio-group v-model="isAdmin">
          <el-radio label="1">管理员</el-radio>
          <el-radio label="0">普通用户</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style=" width: 100%;height: 130%;font-size: 16px" @click="login">登 录</el-button>
      </el-form-item>

      <el-form-item>
        <el-button type="text" style="font-size: 16px; color: #409eff; width: 100%;height: 130%;"
          @click="goRegister">没有账号? 前往注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import request from "../utils/request";
import { ElMessage } from "element-plus";
import { ref } from "vue";
import { getCurrentInstance } from "vue";
import { useMainStore } from "../store/index.js";

const instance = getCurrentInstance();
const store = useMainStore()

const form = ref({});
const isAdmin = ref("0");
const rules = {
  userName: [
    {
      required: true,
      message: '请输入用户名',
      trigger: 'blur',
    }
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur',
    }
  ]
};

const goRegister = () => {
  instance.proxy.$router.push("/register")
}

const login = () => {
  let url = isAdmin.value == "1" ? "/login/administrator" : "/login";
  request.post(url, form.value).then(res => {
    if (res.code == 1) {
      ElMessage.success("登录成功");
      sessionStorage.setItem("token", JSON.stringify(res.data)); // 缓存用户信息
      store.$patch({
        token: res.data,
        userName: form.value.userName,
        isAdmin: isAdmin.value == "1" ? true : false,
        isLogin: true
      })
      if (isAdmin.value == "1") instance.proxy.$router.push("/book")
      else instance.proxy.$router.push("/home")
    } else {
      ElMessage.error(res.msg);
    }
  });

};
</script>

<script>
export default {
  name: "Login",
  setup() {
    return {
      form,
      rules,
      login
    };
  }
};
</script>

<style lang="scss" scoped>
.login-container {
  position: fixed;
  width: 100%;
  height: 100vh;
  background: url('../assets/bg2.svg');
  background-size: contain;
  overflow: hidden;
}

.login-page {
  border-radius: 5px;
  margin: 300px auto;
  width: 420px;
  padding: 35px 35px 15px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}

.el-input__inner {
  height: 40px;
}
</style>